<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ include file="/pages/safeai/jsp/common/taglibs.jsp"%>
<%@ page isELIgnored="false"%>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>购物车页面</title>
		<script type='text/javascript' src='${ctx}/js/safeai/Ajax.js'></script>
		<script type='text/javascript' src='${ctx}/script/shop/opendiv.js'></script>
		<script type='text/javascript' src='${ctx}/script/shop/smallCar.js'></script>
		<script type='text/javascript' src='${ctx}/js/safeai/filter.js'></script>
		<script type='text/javascript' src='${ctx}/js/safeai/jquery.js'></script>
		<script type='text/javascript' src='${ctx}/js/safeai/json2.js'></script>
		<link href="${ctx}/css/style.css" rel="stylesheet" type="text/css" />
		<style type="text/css">
.fg {
	width: 100%;
	height: 100%;
	background: black;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	display: none;
	filter: alpha(opacity = 50);
	opacity: 0.4;
}
</style>
	</head>

	<body>
		<div id="bodyDiv">
			<div class="bg">
				<div class="bg_inside">
					<div class="head">
						<%@ include file="/pages/safeai/jsp/shop/header.jsp"%>
					</div>
					<div class="middle">
						<div class="cart_title">
							您已经选购下列商品
						</div>
						<div class="cart_cont">
							<ul>
								<li
									style="width: 970px; background-image: url(${ctx}/images/cart_top.jpg); background-position: center center; background-repeat: no-repeat; height: 33px; padding-top: 10px; border: 0px; color: #5a3e2e">
									<span style="margin: 0px">商品图片</span>
									<span style="width: 260px; margin: 0px">商品名称</span>
									<span style="margin: 0px">商品单价</span>
									<span style="margin: 0px">是否开发票</span>
									<span style="margin: 0px">选购数量</span>
									<span style="margin: 0px">单品小计</span>
									<span style="margin: 0px">赠送积分</span>
									<span style="margin: 0px">库存</span>
									<span style="margin: 0px">删除商品</span>
								</li>
								<!--在session中获取购物车数据-->
								<logic:present name="ShoppingCart" scope="session">
									<!--循环购物车数据-->
									<logic:iterate id="sc" name="ShoppingCart">
										<input type="hidden" name="freeDeliver"
											value="${sc.value.freeDeliver}" />
										<input type="hidden" name="taxPrice"
											value="${sc.value.taxPrice}" />
										<input type="hidden" name="price" value="${sc.value.price}" />
										<input type="hidden" name="getPoint"
											value="${sc.value.getPoint}" />
										<li>
											<span style="margin: 0px"><a style="display:block;width:50px;height:50px;margin-left:10px;" href="${ctx}/product/productMessage.do?method=shopDeatails&id=${sc.value.id}" target="_blank">
													<img src="${ctx}/product_image/${sc.value.id}_1_50X50.jpg"
														border="0px" width="50px" height="50px" /> </a> </span>
											<span style="width: 260px"><a href="${ctx}/product/productMessage.do?method=shopDeatails&id=${sc.value.id}" target="_blank"
												class="text_ad"> ${sc.value.pname}</a> </span>
											<input type="hidden" name="key" value="${sc.key}">
											<span id="shopPrice${sc.key}">单价</span>

											<span style="margin-top: 15px"><label> 
													<select name="isNeedPaper"
														onchange="javascript:changeValue(${sc.key},this)" size="1">
														<option value="0">
															否
														</option>
														<option value="1">
															是
														</option>
														<input type="hidden" name="hiddIsNeedPaper" value="${sc.value.isNeedPaper}" />
													</select>
												</label> </span>
											<form action="${ctx}/shopping/viewShoppingCart.do" id="${sc.key}form" method="post">
												<span style="margin-top: 15px"> 
												<label style="width:80px;height:20px;">
														<input type="hidden" name="m" value="updateNumForward" style="width:0;height:0;line-height:0;" />
														<input type="hidden" name="id" value="${sc.key}" style="width:0;height:0;line-height:0;" />
														<input type="text" name="quantity" maxlength="10"  id="${sc.key}quantity" value="${sc.value.quantity}" onBlur="if(this.value==''||this.value<=0){alert('请输入大于0的数字');this.value=${sc.value.quantity};this.focus();}" style="display:inline;" />
														<input type="hidden" name="hiddquantity" value="${sc.value.quantity}" style="width:0;height:0;line-height:0;" />
														
													</label><a href="javascript:submitUpdateNumberForm('${sc.key}form','${sc.key}quantity','${sc.value.quantity}');" class="text_ad">更新</a> </span>
											</form>
											<span id="shopPriceSum${sc.key}">￥小计</span>
											<span id="point${sc.key}"> 积分小计 </span>
											<span>${sc.value.status}</span>
											<span><a
												href="${ctx}/shopping/viewShoppingCart.do?m=forwardDelete&id=${sc.key}"
												class="text_ad">删除</a> </span>
										</li>
									</logic:iterate>
									<logic:iterate id="frees" name="free" scope="session">
										<li>
											<span style="margin: 0px"><a style="display:block;width:50px;height:50px;margin-left:10px;" href="${ctx}/product/productMessage.do?method=shopDeatails&id=${frees.value.id}" target="_blank">
													<img
														src="${ctx}/product_image/${frees.value.id}_1_50X50.jpg"
														border="0px" width="50px" height="50px" /> </a> </span>
											<span style="width: 260px"><a href="${ctx}/product/productMessage.do?method=shopDeatails&id=${frees.value.id}" target="_blank"
												class="text_ad"> ${frees.value.pname}</a> </span>
											<span>赠品</span>

											<span style="margin-top: 15px"><label>
													——
												</label> </span>
											<span style="margin-top: 15px"> <label>
													${frees.value.quantity}
												</label> </span>
											<span>——</span>
											<span> —— </span>
											<span>——</span>
											<span>——</span>
										</li>

									</logic:iterate>
								</logic:present>


								<li
									style="width: 970px; background-image: url(${ctx}/images/cart_bottom.jpg); background-position: center center; background-repeat: no-repeat; height: 17px; border: 0px; margin-bottom: 10px"></li>
							<div class="clearAll"></div>
							</ul>

						</div>
					</div>

					<div class="cart_pay">
						可获商品积分：
						<span id="pointsumSpan">0</span> 分│商品金额总计：￥
						<span class="index_price" id="totalSumSpan">总计</span> 元
						<a href="#" onclick="javascript:openWindow();" class="reg_button">索要发票</a>
					</div>
					<div class="cart_pay">
						<div
							style="float: right; width: 94px; margin: -10px 0px 0px 20px;">
							<a href="#" onclick="javascript:openWindow();"><img
									src="${ctx}/images/jiesuan.jpg" /border="0px" /> </a>
						</div>
						<div>
							<input type="hidden" value="${ctx}" id="ctx" />
							<a href="javascript:isclear()" class="reg_button2 ">清空购物车</a>
							<a href="${ctx}/front/favorite.do?method=addFavorite&isSC=true"
								class="reg_button2 ">加入我的收藏</a>
							<a href="${ctx}/pages/safeai/jsp/shop/in.jsp" class="reg_button2 ">继续购物</a>
						</div>
					</div>
					<div class="bottom">
						<%@ include file="/pages/safeai/jsp/shop/bottom.jsp"%>
					</div>
				</div>
			</div>



	<form action="${ctx}/shopping/viewShoppingCart.do?m=submitInvoice" method="post" id="invoiceform">
	<!-- 覆盖层 -->
			<div id="fg" class="fg"></div> 
			<!-- 要发票提示 -->
			<style>.invoice li{float:none;}</style>
			<div id="toInvoice" class="invoice" style="display:none;background-color:white;
                border:1px solid #336699; position:absolute;left:50%; top:30%; 
                font:12px Verdana,'宋体',Arial,sans-serif;margin-left:-200px; 
                margin-top:npx; width:400px;text-align:center;
                z-index:100001;">
                <ul>
                <li style="color:#5a3e2e">索要发票<a href="${ctx}/pages/safeai/jsp/help/repair.jsp" target="_blank"  class="invoice_baoxiu">保修详情</a></li>
                <li style=" background-color:#efefef">* 发票金额以提交订单前最终金额为准。</li>
                <li>您的购物车里有 <span  style="color:#F4972D" id="invoiceCountSumSpan">0</span> 件商品需要开发票，请填写发票信息</li>
                <li>发票类型：
                	<label>
                		<input type="radio" name="invoicetype" value="1" checked="checked" onclick="javascript:openZzs();"/>
                	</label> 普通发票　
                	<label>
                		<input type="radio" name="invoicetype" value="2" onclick="javascript:openZzs();"/>
                	</label> 增值税发票
                	<span style="padding-left:67px;width:auto;display:none" id="zzs">
                	需要开具增值税专用发票的客户需准备好加盖公章的营业执照副本、税务登记证副本、一般纳税人资格证书，并准备好开票信息、开户行、帐号，
                	然后拨打400-810-3859联系锐意客服。
                    </span>
                </li>
               
                <span id="fzzs">
                <li>发票抬头：
                	<label>
                		<input type="radio" name="invoiceCompany" value="1" checked="checked"/>
                	</label> 个人
                	<label>
                		<input type="radio" name="invoiceCompany" value="2" />
                	</label> 单位
                </li>
                <li style="padding-left:67px;width:100px;width:300px;">
                	<label>
                		<input type="text" name="invoicecompanytText" id="textfieldd"  class="invoice_input" maxlength="200">
                	</label>
                </li>
                <li>发票内容：
                	<label>
                		<input type="radio" name="invoicecontent" value="1" checked="checked" onclick="javascript:setHiddeninvoicecontent();"/>
                	</label> 明细　
                	<label>
                		<input type="radio" name="invoicecontent" value="2" onclick="javascript:setHiddeninvoicecontent();"/>
                	</label> 办公用品　
                	<label>
                		<input type="radio" name="invoicecontent" value="3" onclick="javascript:setHiddeninvoicecontent();"/>
                	</label> 电脑配件　
                	<label>
                		<input type="radio" name="invoicecontent" value="4" onclick="javascript:setHiddeninvoicecontent();"/>
                	</label> 耗材
                </li>
                </span>
				<li style="margin-top:20px; height:30px;text-align:center">
					<a href="javascript:sfkaifp('1'),submitForm('invoiceform');"  class="reg_button ">提交发票信息</a>
                　		<a href="#"  class="reg_button2 " onmousedown="javascript:closeWinodw('toInvoice')">关闭此页面</a>
                </li>
                <li style="width:0;height:0;margin:0;padding:0;font-size:0;clear:both;"></li>
              </ul>
              <div style="width:0;height:0;margin:0;padding:0;font-size:0;clear:both;"></div>
           </div>
			<!-- 不要发票提示 -->
			<div class="invoice" id="notToInvoice" style="display:none;background-color:white;
                border:1px solid #336699; position:absolute;left:50%; top:30%; 
                font:12px Verdana,'宋体',Arial,sans-serif;margin-left:-200px; 
                margin-top:npx; width:400px; height:220px;text-align:center;
                z-index:100001;">
                <ul>
					<li style="color:#5a3e2e">您未选择开具发票，同样可以得到锐意网完善的售后服务。</li>
					<li>查看<a href="${ctx}/pages/safeai/jsp/help/repair.jsp" target="_blank"  class="invoice_baoxiu">保修详情</a></li>
					<li>如果您需要开具发票请点击　<a href="#" target="_blank"  onmousedown="javascript:closeWinodw('notToInvoice')" class="invoice_baoxiu">返回购物车</a></li>
					<li>如果您确认不需要开发票请点击　
					<a href="javascript:sfkaifp('0'),submitForm('invoiceform');" class="invoice_baoxiu">继续下一步</a></li>
					<li style="margin-top:20px; height:30px;text-align:center">
					<a href="#" onmousedown="javascript:closeWinodw('notToInvoice')" class="reg_button ">返回购物车</a>　
					<a href="javascript:sfkaifp('0'),submitForm('invoiceform');" class="reg_button ">继续下一步</a></li>
				</ul>
           	</div>
           	    <input type="hidden" name="sfkaifp" id="sfkaifp"/>
           	    <input type="hidden" name="totalSum" id="totalSum"/>
           		<input type="hidden" name="invoiceSum" id="invoiceSum"/>
           		<input type="hidden" name="invoiceCountsum" id="invoiceCountsum"/>
           		<input type="hidden" name="pointsum" id="pointsum"/>
           	    <input type="hidden" name="hiddeninvoicecontent" id="hiddeninvoicecontent" value="1"/>
           		
           </form> 	
            <input type="hidden" id="userinfo" value="${USERINFOFRONT.username}"/>
            <form id="loginFrom" action="${ctx}/front/login.do?method=toLogin&hisForward=/pages/safeai/jsp/shoppingcart/shoppingCartForward.jsp" method="post">
            	<input type="hidden" name="method" value="toLogin">
            	<input type="hidden" name="hisForward" value="/pages/safeai/jsp/shoppingcart/shoppingCartForward.jsp">
           	</form>
          
</div>
</body>

<script type="text/javascript">

//页面加载事件*******************************************************************************		
window.onload=function(){//1 start
   //防止重复提交
   defense();
   //取得所有商品的不含税价格
   var price=document.getElementsByName("price");
   //取得所有商品的含税价格
   var taxPrice=document.getElementsByName("taxPrice");
   //取得所有商品的是否开发票属性1	
   var hiddIsNeedPaper=document.getElementsByName("hiddIsNeedPaper");
   //取得所有商品的是否开发票属性2
   var isNeedPaper=document.getElementsByName("isNeedPaper");
   //取得所有商品的购买数量
   var quantity=document.getElementsByName("quantity");
   //每个单品赠送积分
   var getPoint=document.getElementsByName("getPoint");
 
   this.onloadcheck(price,taxPrice,hiddIsNeedPaper,isNeedPaper,quantity,getPoint);
   onloddiv();
  
}//1 end

//计算小计算和总计
function onloadcheck(price,taxPrice,hiddIsNeedPaper,isNeedPaper,quantity,getPoint){
   //获取所有商品的id
   var keys=document.getElementsByName("key");
   
   //商品金额总计
   var total=0;
   //开发票金额总计
   var invoiceSum=0;
   //开发票的商品数量和
   var invoiceCountsum=0;
   //所有商品数量和
   var number=0;
   //商品积分总和
   var pointsum=0;
  
  for(var i=0;i<keys.length;i++){//for start
     //获取显示单价位置
     var shopPrice=document.getElementById("shopPrice"+keys[i].value);
     //获取显示小计位置
     var shopPriceSum=document.getElementById("shopPriceSum"+keys[i].value);
     //获取显示积分小计位置
     var point=document.getElementById("point"+keys[i].value);
     //shopPrice.innerHTML="cccccccc";
     //单价价格
     var shopPricei=0;
     if(hiddIsNeedPaper[i].value==0){//if 1 start
               //单价为不含税价格
               shopPricei=new Number(price[i].value);
               isNeedPaper[i].selectedIndex ="0";
           }else{
               //单价为含税价格
               shopPricei=new Number(taxPrice[i].value);
               isNeedPaper[i].selectedIndex ="1";
           }//if 1 end
     //显示单价
     shopPrice.innerHTML=shopPricei.toFixed(2);
     //显示小计
     var xiaoji=new Number(shopPricei*quantity[i].value);
     shopPriceSum.innerHTML=xiaoji.toFixed(2);
     //计算商品金额总计
     total+=xiaoji;
     if(isNeedPaper[i].value==1){//if 1 start
               //开发票金额总计
               invoiceSum+=xiaoji;
               //计算开发票商品数量
               invoiceCountsum+=new Number(quantity[i].value);
     }
     //计算购物车商品数量
     number+=new Number(quantity[i].value);
     //计算积分小计
     var jifen=new Number(getPoint[i].value*quantity[i].value);
     //显示积分小计
     point.innerHTML=jifen;
     //计算积分总额
     pointsum+=jifen;
  }//for end
    //商品金额总计
    document.getElementById("totalSum").value=total.toFixed(2);
    document.getElementById("totalSumSpan").innerHTML=total.toFixed(2);
  
    //积分总额
    document.getElementById("pointsum").value=pointsum;
    document.getElementById("pointsumSpan").innerHTML=pointsum;
    
    //发票金额
    document.getElementById("invoiceSum").value=(new Number(invoiceSum)).toFixed(2);
    //发票数量invoiceCountsum
    document.getElementById("invoiceCountsum").value=invoiceCountsum;
    document.getElementById("invoiceCountSumSpan").innerHTML=invoiceCountsum;    
    //所有商品数量和number
    //cument.getElementById("number").innerHTML=number; 
    //document.getElementById("number1").innerHTML=number; 
  
}
//根据是否开发票更改价格
 function changeValue(id,o){
  //取得所有商品的不含税价格
   var price=document.getElementsByName("price");
   //取得所有商品的含税价格
   var taxPrice=document.getElementsByName("taxPrice");
   //取得所有商品的是否开发票属性
   var isNeedPaper=document.getElementsByName("isNeedPaper");
   //取得所有商品的是否开发票属性
   var hiddIsNeedPaper=document.getElementsByName("hiddIsNeedPaper");
   //每个单品赠送积分
   var getPoint=document.getElementsByName("getPoint");
   
   for(var i=0;i<isNeedPaper.length;i++){
     hiddIsNeedPaper[i].value=isNeedPaper[i].value;
   }
   //取得所有商品的单个商品购买数量
   var quantity=document.getElementsByName("quantity");
   //从新计算价格
   this.onloadcheck(price,taxPrice,hiddIsNeedPaper,isNeedPaper,quantity,getPoint);
   //改变订单商品属性
   this.csAjax(id,o);
}

//弹出层****************************************************************************************  
function openWindow(){
   var userinfo  = document.getElementById("userinfo").value;
	 
   if(userinfo==""){
       var loginFrom=document.getElementById("loginFrom");
   	   loginFrom.submit();
   }else{
	   sWidth=document.body.offsetWidth;//浏览器工作区域内页面宽度
	   sHeight=document.body.offsetHeight;//屏幕高度（垂直分辨率）
	   //取得所有商品的是否开发票属性
	   var isNeedPaper=document.getElementsByName("isNeedPaper");
	   //判断是否有商品
	   if(isNeedPaper.length>0){
	       //储存是否有需要发票的内容“0”没有 “1”有
	       var isNeed=0;
	       //循环判断是否有需要发票的商品
	       for(var i=0;i<isNeedPaper.length;i++){
	          if(isNeedPaper[i].value=="1"){
	          isNeed=1;
	          break;
	          }  
	       }
	       //打开覆盖层
	       //var fg=document.getElementById("fg");
	       openCover();
	       //fg.style.display="block";
	       var bodyDiv=document.getElementById("bodyDiv");
	       //alert("scrollHeight:"+bodyDiv.scrollHeight);
	       //alert("scrollHeight:"+document.body.scrollHeight);
	       //alert("scrollWidth:"+bodyDiv.scrollWidth);
	       //fg.style.width=sWidth+"px";
	       //fg.style.height=sHeight+"px";
	       //fg.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
	       if(isNeed==1){//如果要发票
	            var toInvoice=document.getElementById("toInvoice");
	            toInvoice.style.display="";
	       }else{//如果不要发票
	            var notToInvoice=document.getElementById("notToInvoice");
	            notToInvoice.style.display="";
	       }
	    }else{//如果没有商品则弹出提示
	       alert("您没有选购商品！！");
	    }
    }
}
//关闭浮动层
function closeWinodw(divname){
 var div=document.getElementById(divname);
 div.style.display="none";
 //var fg=document.getElementById("fg");
 //fg.style.display="none";
 closeCover();
}
  //弹出层内部的显示与隐藏
  function openZzs(){
     var invoicetypes=document.getElementsByName("invoicetype");
     //所有明细
     var invoicecontents=document.getElementsByName("invoicecontent");
     //保存明细信息的隐含域
     var hiddeninvoicecontent=document.getElementById("hiddeninvoicecontent");
     //如果是增值税发票则显示
     var zzs =document.getElementById("zzs");
     //如果不是增值税发票则显示
     var fzzs=document.getElementById("fzzs");
     for(var i=0;i<invoicetypes.length;i++){
         //判断是否被选中
         if(invoicetypes[i].checked==true){
            if(invoicetypes[i].value==1){//1普通发票 ，2增值税发票
                fzzs.style.display="block";
                zzs.style.display="none";
                var boolzz=false;//判断是否有被选中的
                for(var j=0;j<invoicecontents.length;j++){
                    if(invoicecontents[j].checked==true){
                        hiddeninvoicecontent.value=invoicecontents[j].value;
                        boolzz=true;
                    }
                }
                if(!boolzz){//如果没有被选中的则为空
                    hiddeninvoicecontent.value="";
                }
            }else{
                fzzs.style.display="none";
                zzs.style.display="block";
                hiddeninvoicecontent.value=5;
            }
         }
     } 
      
  }
  //弹出层中 客户选择发票内容事件
  function setHiddeninvoicecontent(){
      var invoicecontents=document.getElementsByName("invoicecontent");
      for(var i=0;i<invoicecontents.length;i++){
          if(invoicecontents[i].checked==true){
              //保存明细信息的隐含域
              var hiddeninvoicecontent=document.getElementById("hiddeninvoicecontent");
              hiddeninvoicecontent.value=invoicecontents[i].value;
          }
      }
  }
//ajax******************************************************************************
     
  //更改购物车中指定商品是否开发票属性
  function csAjax(id,o){
  //select 选中值
  var selecto=o.value;
        xhr = false;
        var ctx=document.getElementById("ctx");
        var url=ctx.value+"/shopping/viewShoppingCart.do";
        var _parameter="m=xmlajax&id="+id+"&isNeedPaper=" + selecto;
        var ajax=new Ajax();
        ajax.ajaxRequest(url,_parameter,'get',alertAjax);
   }
//ajax返回函数
   function alertAjax(test){}
//清空购物车
  function isclear(){
    if(confirm('是否清空购物车？')==true){
      var ctx=document.getElementById("ctx");
      var url=ctx.value+'/shopping/viewShoppingCart.do?m=clear';  
      location.href=url;
    }
  }
 //提交更新链接的form以改变购物车内单品数量
  function submitForm(id){
	var formi=document.getElementById(id);
	
	 //储存是否有需要发票的内容“0”没有 “1”有
	       var isNeed=0;
	       //循环判断是否有需要发票的商品
	        var isNeedPaper=document.getElementsByName("isNeedPaper");
	       for(var i=0;i<isNeedPaper.length;i++){
	          if(isNeedPaper[i].value=="1"){
	          isNeed=1;
	          break;
	          }  
	       }
	if(id=='invoiceform' && isNeed==1){
	    //获取所有发票类型
	    var invoicetype=document.getElementsByName("invoicetype");
	    for(var i=0;i<invoicetype.length;i++){
	        if(invoicetype[i].checked==true){//判断那个被选中
	            if(invoicetype[i].value==1){//是否是普通发票
	                var textfield=document.getElementById("textfieldd");
	                if(textfield.value==""){
	                    alert("发票抬头不能为空！");
	                    return;
	                }
	            }
	        }
	    }
	}
	formi.submit();
  }
   //提交更新链接的form以改变购物车内单品数量
  function submitUpdateNumberForm(id,textid,v){
	var formi=document.getElementById(id);
	var textNumber=document.getElementById(textid);
	
    var ss = /^[1-9]\d*$/;
   if(textNumber.value==""||(!(ss.test(textNumber.value)))){
   alert("请输入大于零的数字!");
   document.getElementById(textid).value=v;
   }else{
    formi.submit();
   } 
  }
  function sfkaifp(isneedpaper){
    var sfkaifp=document.getElementById("sfkaifp");
    sfkaifp.value=isneedpaper;
  }
/***********************************防止后退按钮*****************************************************/
function defense(){
    var ajax=new Ajax();
    var ctx=document.getElementById("ctx");
    ajax.ajaxRequest(ctx.value+"/shopping/viewShoppingCart.do","m=Defense",'GET',backDefense)
}

function backDefense(yemian){
   var ctx=document.getElementById("ctx");
   if(yemian!="shoppingCart.jsp"){      
          history.go(1);
          return;
   }
}
</script>
</html>
